<script setup>
import {onUpdated, ref} from "vue";
// 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
// <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听change 事件；
// <select> 会绑定 value property 并侦听 change 事件。

// v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。
let username = ref('zhangsan');
let checked1 = ref(true)

// 用来接收多选框中的值
const checkedNames = ref([])

// 选择器的选项可以使用 v-for 动态渲染
const selected = ref('A')

const options = ref([
  {text: 'One', value: 'A'},
  {text: 'Two', value: 'B'},
  {text: 'Three', value: 'C'}
])

let toggle = ref();
let a = ref('a');
let b = ref('b')

let pick = ref('first');
let first = ref('first')
let second = ref('second')


let picked = ref(true)

let obj = ref({number: 123});

let msg = ref()

let age = ref('123')
// 演示.number返回是一个数字 该数字是可转换的
onUpdated(() => {
  console.log(typeof age.value)
});
</script>

<template>
  <!--  默认的value会被忽略-->
  用户名：<input type="text" value="abc" v-model="username">
  {{ username }}
  <!--  省略案例 见文档-->

  <!--  textarea不支持插值表达式-->
  <!-- 错误 -->
  <textarea>{{ text }}</textarea>
  <!-- 正确 -->
  <textarea v-model="text"></textarea>

  <!--  是否选中-->
  <input type="checkbox" id="checkbox" v-model="checked1"/>
  <!--  <label for="checkbox">{{ checked1 }}</label>-->

  <!--  单选按钮-->
  <!--  v-model 绑定的是同一个变量就可以实现单选效果-->
  <!--  单选按钮 需要添加checked属性来实现默认选中-->
  <div>Picked: {{ picked }}</div>

  <input type="radio" id="one" value="One" v-model="picked" checked/>
  <!--  <label for="one">One</label>-->
  <input type="radio" id="two" value="Two" v-model="picked"/>
  <!--  <label for="two">Two</label>-->


  <!--  多选框-->
  <div>Checked names: {{ checkedNames }}</div>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"/>
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames"/>
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"/>
  <label for="mike">Mike</label>
  <br><br>
  <!--  通过v-for动态渲染-->
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>

  <div>Selected: {{ selected }}</div>

  <form action="http://localhost:8080/aaa">
    <!--    多选值绑定-->
    <input
        type="checkbox"
        v-model="toggle"
        :true-value="a"
        :false-value="b" name="hb" :value="toggle"/>
    {{ toggle }}
    {{ a }}
    {{ b }}

    <select name='city' v-model="selected">
      <!-- 内联对象字面量 -->
      <option :value="obj">123</option>
    </select>
    <input type="submit">

  </form>
  <!--  单选值绑定-->
  <!--  选中效果：要保证v-model的值和value绑定的变量名称一样-->
  <input type="radio" v-model="pick" :value="first"/>
  <input type="radio" v-model="pick" :value="second"/>
  {{ pick }}


  <!-- 在 "change" 事件后同步更新而不是 "input" -->
  <input v-model.lazy="msg"/>
  {{ msg }}


  <input v-model.number="age"/>
  {{ age }}


</template>


<style scoped>

</style>
